<template>
  <MyDialog
    v-model="isVisible"
    :type="type"
    class="audit-dialog-wrapper"
    width="1200"
    :dialog-title="dialogTitle"
    :need-modal="needModal"
    @closed="closed"
  >
    <my-table-items :item-datas="itemsDatas" :form-datas="formsDatas" class="my-table-items" />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closed">关闭</el-button>
      </span>
    </template>
  </MyDialog>
</template>
<script setup lang="ts" name="contrast">
import { ref } from 'vue';
import { getAb02, getAb02New } from '@/api/yuanshidian/ab02';
import { getAb03, getAb03New } from '@/api/yuanshidian/ab03';
const { proxy } = getCurrentInstance();
const props = defineProps(
  {
    dialogTitle: {
      type: String,
      default: '对比'
    },
    needModal: {
      type: Boolean,
      default: true
    },
    modelValue: {
      type: Boolean,
      default: false
    },
    currentRow: {
      type: Object,
      default: () => {}
    }
  },
  ['modelValue']
);
const itemsDatas = ref([
  [
    { label: '修改前', prop: '', valueHide: true, labelColspan: '2' },
    { label: '修改后', prop: '', valueHide: true, labelClass: 'new', labelColspan: '2' }
  ],
  [
    { label: '统筹区编码', prop: 'oldaaa027' },
    { label: '统筹区编码', prop: 'newaaa027' }
  ],
  [
    { label: '原编号', prop: 'oldgrbh' },
    { label: '原编号', prop: 'newgrbh' }
  ],
  [
    { label: '个人编号', prop: 'oldgr01' },
    { label: '个人编号', prop: 'newgr01' }
  ],
  [
    { label: '身分证号码', prop: 'oldgr02' },
    { label: '身分证号码', prop: 'newgr02' }
  ],
  [
    { label: '个人帐号', prop: 'oldgr03' },
    { label: '个人帐号', prop: 'newgr03' }
  ],
  [
    { label: '职工姓名', prop: 'oldgr04' },
    { label: '职工姓名', prop: 'newgr04' }
  ],
  [
    { label: '性别', prop: 'oldgr05' },
    { label: '性别', prop: 'newgr05' }
  ],
  [
    { label: '民族', prop: 'oldgr06' },
    { label: '民族', prop: 'newgr06' }
  ],
  [
    { label: '出生时间', prop: 'oldgr07' },
    { label: '出生时间', prop: 'newgr07' }
  ],
  [
    { label: '工作时间', prop: 'oldgr08' },
    { label: '工作时间', prop: 'newgr08' }
  ],
  [
    { label: '职工身份', prop: 'oldgr09' },
    { label: '职工身份', prop: 'newgr09' }
  ],
  [
    { label: '建立帐户时间', prop: 'oldgr10' },
    { label: '建立帐户时间', prop: 'newgr10' }
  ],
  [
    { label: '计算值', prop: 'oldgr11A' },
    { label: '计算值', prop: 'newgr11A' }
  ],
  [
    { label: '调整值', prop: 'oldgr11B' },
    { label: '调整值', prop: 'newgr11B' }
  ],
  [
    { label: '视同', prop: 'oldgr11' },
    { label: '视同', prop: 'newgr11' }
  ],
  [
    { label: '统筹开始时间', prop: 'oldgr12' },
    { label: '统筹开始时间', prop: 'newgr12' }
  ],
  [
    { label: '统筹结束时间', prop: 'oldgr13' },
    { label: '统筹结束时间', prop: 'newgr13' }
  ],
  [
    { label: '统筹缴费月', prop: 'oldgr14' },
    { label: '统筹缴费月', prop: 'newgr14' }
  ],
  [
    { label: '统筹缴费总额', prop: 'oldgr15' },
    { label: '统筹缴费总额', prop: 'newgr15' }
  ],
  [
    { label: '统筹单位缴费额', prop: 'oldgr16' },
    { label: '统筹单位缴费额', prop: 'newgr16' }
  ],
  [
    { label: '统筹个人缴费额', prop: 'oldgr17' },
    { label: '统筹个人缴费额', prop: 'newgr17' }
  ],
  [
    { label: '实际工资', prop: 'oldgr18' },
    { label: '实际工资', prop: 'newgr18' }
  ],
  [
    { label: '缴费基数', prop: 'oldgr19' },
    { label: '缴费基数', prop: 'newgr19' }
  ],
  [
    { label: '个人缴费额', prop: 'oldgr20' },
    { label: '个人缴费额', prop: 'newgr20' }
  ],
  [
    { label: '94调标工资', prop: 'oldgr21' },
    { label: '94调标工资', prop: 'newgr21' }
  ],
  [
    { label: '状态', prop: 'oldgr22' },
    { label: '状态', prop: 'newgr22' }
  ],
  [
    { label: '异动原因', prop: 'oldgr23' },
    { label: '异动原因', prop: 'newgr23' }
  ],
  [
    { label: '异动月份', prop: 'oldyd03' },
    { label: '异动月份', prop: 'newyd03' }
  ],
  [
    { label: '记帐月份', prop: 'oldyd08' },
    { label: '记帐月份', prop: 'newyd08' }
  ],
  [
    { label: '异动时补(退)额', prop: 'oldyd10' },
    { label: '异动时补(退)额', prop: 'newyd10' }
  ],
  [
    { label: '补(退)标志', prop: 'oldyd11' },
    { label: '补(退)标志', prop: 'newyd11' }
  ],
  [
    { label: '其中单位补(退)', prop: 'oldyd12' },
    { label: '其中单位补(退)', prop: 'newyd12' }
  ],
  [
    { label: '新工资', prop: 'oldgr24' },
    { label: '新工资', prop: 'newgr24' }
  ],
  [
    { label: '调出单位编码', prop: 'oldgr26' },
    { label: '调出单位编码', prop: 'newgr26' }
  ],
  [
    { label: '补充额标准', prop: 'oldgr50' },
    { label: '补充额标准', prop: 'newgr50' }
  ],
  [
    { label: '储蓄额标准', prop: 'oldgr51' },
    { label: '储蓄额标准', prop: 'newgr51' }
  ],
  [
    { label: '本次补充额', prop: 'oldgr52' },
    { label: '本次补充额', prop: 'newgr52' }
  ],
  [
    { label: '本次储蓄额', prop: 'oldgr53' },
    { label: '本次储蓄额', prop: 'newgr53' }
  ],
  [
    { label: '折算工龄', prop: 'oldgr60' },
    { label: '折算工龄', prop: 'newgr60' }
  ],
  [
    { label: '系统时间', prop: 'oldsystime' },
    { label: '系统时间', prop: 'newsystime' }
  ],
  [
    { label: '通讯地址', prop: 'oldtx52' },
    { label: '通讯地址', prop: 'newtx52' }
  ],
  [
    { label: '联系电话', prop: 'oldtx57' },
    { label: '联系电话', prop: 'newtx57' }
  ],
  [
    { label: '邮政编码', prop: 'oldtx58' },
    { label: '邮政编码', prop: 'newtx58' }
  ]
]);
const oldObj = ref({});
const formsDatas = ref({});
const contrast = (oldData, newData) => {
  for (var key in oldData) {
    if (oldData[key] !== newData[key]) {
      this.itemsDatas.forEach((item) => {
        if (item[1].prop === 'new' + key) {
          item[1].class = 'newClass';
        }
      });
    }
  }
};
const isVisible = ref(false);
watch(
  () => props.modelValue,
  async (v) => {
    isVisible.value = v;
    if (props.currentRow.id) {
      if (props.currentRow.activeName === 'first') {
        var res = await getAb02(props.currentRow.id);
        oldObj.value = res.data || {};
        for (var key in res.data) {
          // set(formsDatas.value, 'old' + key, res.data[key]);
          formsDatas.value['old' + key] = res.data[key];
        }
        var res1 = await getAb02New(props.currentRow.id);
        for (var key in res.data) {
          formsDatas.value['new' + key] = res1.data[key];
        }
        if (res1.data) {
          contrast(oldObj.value, res1.data);
        }
      } else {
        var res = await getAb03(props.currentRow.id);
        oldObj.value = res.data || {};
        for (var key in res.data) {
          // set(formsDatas.value, 'old' + key, res.data[key]);
          formsDatas.value['old' + key] = res.data[key];
        }
        var res1 = await getAb03New(props.currentRow.id);
        for (var key in res.data) {
          formsDatas.value['new' + key] = res1.data[key];
        }
        if (res1.data) {
          contrast(oldObj.value, res1.data);
        }
      }
    }
  },
  { immediate: true, deep: true }
);
const emit = defineEmits(['update:modelValue']);
const closed = () => {
  emit('update:modelValue');
};
</script>
<style lang="scss">
.my-table-items {
  .new {
    background-color: #f5f7fa;
  }
  .newClass {
    color: red;
  }
}
</style>
